<template>
  <div class="frequently-used-apps">
    <div class="top">
      <div class="left">
        <img src="~@/assets/dashboard/comp_icon_1.png" alt="" width="24" height="24" />
        <span>常用应用</span>
      </div>
      <div class="right" @click="openManage">
        <img src="~@/assets/dashboard/setup.png" alt="" width="12" height="12" />
        <span>管理应用</span>
      </div>
    </div>
    <div class="content">
      <div class="app-item-first">
        <div class="title">
          <img src="~@/assets/dashboard/gbtz.png" alt="" width="22" height="22" />
          <span>广播通知</span>
        </div>
        <div class="content">
          {{ noticeList.length ? noticeList[0].content : '暂无广播通知...' }}
        </div>
      </div>
      <div class="app-item" v-for="(item,index) in $store.state.dashboard.frequentlyUsedAppList" :key="index" v-if="item.text!=='广播通知'" @click.stop="openNewTab(item)">
        <img :src="item.img" alt="" />
        <span>{{ item.text }}</span>
      </div>
      <div class="app-item" @click="openManage">
        <img src="~@/assets/dashboard/add-app.png" alt="" />
        <span>添加应用</span>
      </div>
    </div>
    <frequently-used-app-manage
      :dialog-visible="manageAppDialog.show"
      :frequently-used-app-list="manageAppDialog.frequentlyUsedAppList"
      @close="manageAppDialog.show=false"
      @save="saveManage"
    ></frequently-used-app-manage>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { allAppList } from "@/components/workApp/components/appList";
import frequentlyUsedAppManage from "./dialogs/frequentlyUsedAppManage.vue"
import { findAllAppNew_axios, editUserAppNew_axios } from "@/api/wordbench";
export default {
  components: {
    frequentlyUsedAppManage
  },
  name: "",
  props: {
  },
  data() {
    return {
      noticeList: [],
      appList: [],
      partitionList: [],
      manageAppDialog: {
        show: false,
        frequentlyUsedAppList: [],
      },
    }
  },
  computed: {
    ...mapState(["myInfo"]),
  },
  mounted() {
    //this.getFrequentlyUsedAppList()
    //this.getAllApps()
  },
  methods: {
    //获取常用应用列表（旧版）
    getFrequentlyUsedAppList(){
      let list = [
        '广播通知','我的待办','G3平台','固资申购','远程控制','公文管理','低值申领','我的日程','文件传输助手',
      ]
      this.appList = list.map((item)=>{
        return allAppList.find((appItem)=>{
          return appItem.text === item
        }) || {}
      })
    },
    //管理常用应用
    openManage(){
      this.manageAppDialog = {
        show: true,
        frequentlyUsedAppList: this.$utilJs.deepClone(this.$store.state.dashboard.frequentlyUsedAppList),
      }
    },
    //保存常用应用
    saveManage(list){
      let requestData = list.map((item,index)=>{
        return {
          pid: '888888',
          appId: item.id,
          sortNum: index,
          userId: this.myInfo.id
        }
      })
      console.log('保存常用应用',requestData)
      editUserAppNew_axios(requestData).then((res)=>{
        if(res.code===200){
          this.$showMsg('保存常用应用成功！', 'success')
          this.$store.dispatch('getAllApps', this.myInfo.id);
          this.manageAppDialog.show = false
        }
      })
    },
    //新标签页打开应用
    openNewTab(item) {
      window.$addTab(item.text)
    },
  },
  watch: {
    // "reqLoading.state"(v) {
    //   console.log(v, 45111111);
    // },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.frequently-used-apps {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 8px;
  min-height: 368px;
  //padding: 0 4px;
  backdrop-filter: blur(10px);
  .top {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      span {
        margin-left: 9px;
        font-size: 16px;
        color: #1f1e1d;
      }
    }
    .right {
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        margin-left: 5px;
        font-size: 12px;
        color: #565551;
      }
    }
  }
  .content {
    width: 100%;
    height: 316px;
    overflow-y: auto;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
    grid-template-rows: repeat(auto-fill,100px);
    grid-gap: 4px;
    //justify-content: center;
    margin: 0 auto;
    .app-item-first {
      grid-column-start: 1;
      grid-column-end: 4;
    }
    .app-item {
      height: 100px;
      border-radius: 6px;
      background-color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        margin: 16px 0 8px;
      }
      span {
        line-height: 20px;
        font-size: 14px;
        color: @textColor;
      }
    }
    .app-item-first {
      height: 100px;
      border-radius: 6px;
      background-color: #fff;
      padding: 14px 12px;
      box-sizing: border-box;
      .title {
        width: 100%;
        display: flex;
        align-items: center;
        span {
          margin-left: 8px;
          color: @textColor;
          font-size: 14px;
        }
      }
      .content {
        width: 100%;
        height: 44px;
        line-height: 22px;
        font-size: 14px;
        color: rgba(0,0,0,0.44);
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    &::-webkit-scrollbar {
      width: 0; //隐藏滚动条
    }
  }
}
</style>
